<template>
  <div class="app">
    我是APP组件
    <button @click="change">修改数据</button>
    <SonA></SonA>
    <SonB></SonB>
    <!-- 非父子通信（扩展）-provide&inject
    provide&inject作用：跨层级共享数据
    1.父组件provide提供数据
  export default {
    provide () {
      return {
        //普通类型【非响应式】
        color:this.color,
        //复杂类型【响应式】
        userInfo:this.userInfo,
      }
    }
  } 
  2.子、孙组件inject取值使用
  export default{
    inject: ['color','userInfo'],
    created() {
      console.log(this.color, this.userInfo)
    }
  }-->
  </div>
</template>

<script>
import SonA from './components/SonA.vue'
import SonB from './components/SonB.vue'
export default {
  provide() {
    return {
      // 简单类型 是非响应式的
      color: this.color,
      // 复杂类型 是响应式的
      userInfo: this.userInfo,
    }
  },
  data() {
    return {
      color: 'pink',
      userInfo: {
        name: 'zs',
        age: 18,
      },
    }
  },
  methods: {
    change() {
      this.color = 'red'
      this.userInfo.name = 'ls'
    },
  },
  components: {
    SonA,
    SonB,
  },
}
</script>

<style>
.app {
  border: 3px solid #000;
  border-radius: 6px;
  margin: 10px;
}
</style>